<template>
    <div class="avanced_mod" :class="themeClass">
      <v-loading v-if="loading" />
      <v-nav :title="$t('jiedai.借贷中心')">

       <div @click="navigate()"> {{ $t('jiedai.借贷记录') }} </div>
      </v-nav>
      <div class="avanced_mod_box">
        <div class="moomoo_form" style="padding: 20px 40px;">
            <div class="moomoo_form_input">
            <p>{{ $t('jiedai.借款金额') }}</p>
            <div style="font-size: 20px;" class="flex">{{ money }}</div>
            <vue-slider
                v-model="money"
                :data="data0"
                :marks="marks0"
                
            ></vue-slider>
            <!-- <slider name="distance" :min="0" :max="3" :value="distance.value" :ticks="distance.ticks"
                                :ticks-labels="distance.ticks_labels" :tooltip="false"
                                change-event-name="onDistanceChange"></slider> -->
          </div>
          <div class="moomoo_form_input" style="margin-top: 50px;">
            <p>{{ $t('jiedai.借款期限') }}</p>
            <div style="font-size: 20px;" class="flex">{{ days1 }}</div>
            <vue-slider
              :hide-label="true"
               :tooltip="'none'"
                v-model="days"
                :data="data"
                :marks="marks"
                
                @change="changes"
            ></vue-slider>
            <div style="display: flex;justify-content: space-between;align-items: center;">

              <div @click="days=0,days1=7">7</div>
              <div  @click="days=15,days1=15">15</div>
              <div  @click="days=30,days1=30">30</div>
            </div>

          </div>
  
          <div class="moomoo_form_input"  style="margin-top: 50px;">
            <p>{{ $t('jiedai.担保人uid') }}</p>
            <van-field class="input" v-model="dbr_uid" :disabled="isDisabled" :placeholder="$t('jiedai.请输入担保人uid')" />
          </div>

  
          <div class="moomoo_form_submit">
            <van-button color="#DAAB51" :disabled="isDisabled" @click="primarySubmit">{{ primarySubmitText }}</van-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css'
//   import './bootstrap-slider.css';
// import './bootstrap-slider.min.js';
  export default {
    name: 'JieDai',
    components: {
        VueSlider
        // 'slider': require('./slide'),
    },
    data() {
      return {
        days1:7,
        dbr_uid:'',
        money:100000,
        days:0,
        distance: {
            ticks: [0, 1, 2, 3],
            ticks_labels: ['2 km', '5 km', '10 km', '25 km'],
            value: 1
        },
        sliderValue:50,
        form: {
          type: {},
          name: '',
          number: ''
        },
        cardTypeList: [
          { text: this.$t('PrimaryCertification.ID card'), value: 0 },
          { text: this.$t('PrimaryCertification.passport'), value: 1 },
          { text: this.$t('PrimaryCertification.driver license'), value: 2 }
        ],
        showPicker: false,
        loading: false,
        isDayTime: false,
        isDisabled: false,
        primarySubmitText: this.$t('jiedai.申请')
      }
    },
    created() {
      this.getAuthentication()
    },
    computed: {
        points0: function () {
          return [
            {
              value: 100000,
              step: 10000,
            },
            // {
            //   value: 500000,
            //   step: 10000,
            // },
            {
              value: 1000000,
              step: 10000,
            },
          ];
        },
        data0: function () {
          let result = [];

          this.points0.forEach((point, idx) => {
            const lastPointValue = this.points0[this.points0.length - 1].value;

            if (point.value === lastPointValue) {
              return;
            } else {
              const nextPoint = this.points0[idx + 1];

              for (let i = point.value; i <= nextPoint.value; i += point.step) {
                result.push(i);
              }
            }
          });

          const uniqueValues = new Set(result);
          return [...uniqueValues];
        },
        marks0: function () {
          return this.points0.map(point => point.value);
        },
        points: function () {
          return [
            {
              value: 0,
              step: 1,
            },
            {
              value: 30,
              step: 1,
            },
          ];
        },
        data: function () {
          let result = [];

          this.points.forEach((point, idx) => {
            const lastPointValue = this.points[this.points.length - 1].value;

            if (point.value === lastPointValue) {
              return;
            } else {
              const nextPoint = this.points[idx + 1];

              for (let i = point.value; i <= nextPoint.value; i += point.step) {
                result.push(i);
              }
            }
          });

          const uniqueValues = new Set(result);
          return [...uniqueValues];
        },
        marks: function () {
          return this.points.map(point => point.value);
        },
      themeClass() {
        return this.isDayTime ? '' : 'darknight'
      }
    },
    watch: {
      '$store.state.nightMode': {
        handler(newVal) {
          this.isDayTime = newVal
        },
        immediate: true
      }
    },
    methods: {
      changes(e){
        console.log(e,'变化了---')
       if(e==0||e<=7){
        this.days1=7
       }else{
        this.days1=e
       }
      },
        navigate(){
            console.log('记录')
            this.$router.push('/jiedai_record')
        },
      onConfirm(value) {
        this.form.type = value
        this.showPicker = false
      },
      async primarySubmit() {
        
      
        // if (JSON.stringify(this.form.type) === '{}') {
        //   this.$toast(this.$t('PrimaryCertification.Please select the document type'))
        //   return
        // }
        // if (this.form.name.trim() === '') {
        //   this.$toast(this.$t('PrimaryCertification.Please type in your name'))
        //   return
        // }
        if (this.dbr_uid.trim() == '') {
          this.$toast(this.$t('jiedai.请输入担保人uid'))
          return
        }
        let params = {
          days:this.days1,
          dbr_uid: this.dbr_uid,
          money: this.money,
        }
        this.loading = true
        await this.$https.post('/user/jiedai_submit', params).then(res => {
            console.log(res,'res---')
            this.$toast(res.data)
        //   if (res != undefined && res.code == 1) {
        //     this.$router.go(-1)
        //   }
        })
        this.loading = false
      },
      async getAuthentication() {
        this.loading = true
        await this.$https.get('/user/getAuthentication').then(res => {
          if (res != undefined && res.code == 1 && res.data) {
            this.form.type.text = this.cardTypeList[res.data.primary_type].text
            this.form.type.value = res.data.primary_type
            this.form.name = res.data.primary_name
            this.form.number = res.data.primary_number
            if (res.data.primary_review == 0) {
              this.primarySubmitText = this.$t('PrimaryCertification.Resubmit')
            } else if (res.data.primary_review == 1) {
              this.primarySubmitText = this.$t('PrimaryCertification.Authentication successful')
              this.isDisabled = true
            } else if (res.data.primary_review == 2) {
              this.primarySubmitText = this.$t('PrimaryCertification.Certification in progress')
              this.isDisabled = true
            }
          }
        })
        this.loading = false
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  @import url('./index.less');
  .flex{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
  }
  </style>
  